<template>
  <div class="fr" style="padding: 0px 0px">
    <div style="display: flex">
      <div v-for="item in leveloptions" @click="itemclick(item.value)">
        <div
          class="eachlevelitem frcc"
          :style="{
            backgroundColor: props.fenfaparams.cengji.indexOf(item.value) != -1 ? '#999' : '',
          }"
        >
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="item.len + '米'"
            placement="top"
          >
            {{ item.value }}
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { defineProps, onMounted, defineEmits, ref, onUnmounted, defineExpose } from "vue";

import useCommon from '@/components/pages/shujuguanli/common/useCommon.js';

let Common = useCommon()

let props = defineProps({
  fenfaparams: Object,
});

const leveloptions = ref([]);

function itemclick(v) {
  console.log(props.fenfaparams.cengji.indexOf(v));
  
  if (props.fenfaparams.cengji.indexOf(v) != -1) {
    props.fenfaparams.cengji.splice(props.fenfaparams.cengji.indexOf(v),1)
  }else{
    props.fenfaparams.cengji.push(v)
  }
}

onMounted(() => {
  for (let index = 10; index <= 20; index++) {
    leveloptions.value.push({
      value: index,
      label: index,
      len: Common.getResolutionByLevel(index).toFixed(4),
    });
  }
});

</script>
<style lang="scss" scoped>
.eachlevelitem {
  border: 1px solid white;
  width: 25px;
  height: 30px;
  cursor: pointer;
  &:hover {
    background-color: #3333;
  }
}
</style>
